<template>
  <div class="goodsinfo">
    <!-- 头部 -->
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图-->
  <van-swipe :autoplay="3000" @change="onChange">
    <van-swipe-item v-for="(image, index) in banners" :key="index" @click='previewImage(index)'>
      <img v-lazy="image" />
    </van-swipe-item>
    <!-- 轮播图自定义指示器 -->
    <template #indicator>
      <div class="custom-indicator">{{ current + 1 }}/4</div>
    </template>
    <van-image-preview v-model="show" :images="images" :initial-swipe="index-1" @change="onChangeimg" >
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
  </van-swipe>
    <!-- 视频播放 -->
    <div class="video-btn" @click="myvideo">
    <van-icon name="play-circle-o"  size="14" color="#f66"  />{{videolist}}</div>
    <van-overlay :show="showvideo" @click="showvideo= false">
      <video ref="vdo" :src="vdoSrc" class="my-video" controls></video>
    </van-overlay>
    <van-cell-group class="price-box">
      <!-- 价格 -->
      <div class="myPrice">
        <span class="price">￥{{ originprice}}</span>
        <span>.00</span>
      </div>
      <!-- 二级标题 -->
      <div class="list">
        <span class="category">{{category}}</span>
        <h3 >{{title}}</h3>
      </div>
    </van-cell-group>
    <!-- 优惠 -->
    <van-cell is-link title="优惠" class="discount" @click="showcell  = true" >
      <div class="conter-box">
        <span class="listOne">换购</span>
        <span>购买1件可优惠换购热销商品</span>
        </div>
        <div class="conter-box">
        <span class="listOne">免费领</span>
        <span>体验卡免费领，超大流量任性用</span>
      </div>
        <div class="conter-box">
        <span class="listOne">优惠套装</span>
        <span>该商品共有11款优惠套装</span>
      </div>
    </van-cell>
    <van-action-sheet v-model="showcell"  @select="onSelect">
      <div class="content">
          <div class="promotion">促销</div>
          <div class="conter-box">
            <span class="listOne">换购</span>
            <span>购买1件可优惠换购热销商品</span>
          </div>
            <div class="conter-box">
            <span class="listOne">免费领</span>
            <span>体验卡免费领，超大流量任性用</span>
          </div>
            <div class="conter-box">
            <span class="listOne">优惠套装</span>
            <span>该商品共有11款优惠套装</span>
          </div>
      </div>
    </van-action-sheet>
    <!-- 配送地址 -->
    <van-field
    class="address"
      v-model="fieldValue"
      is-link
      readonly
      label="配送至"
      placeholder="请选择所在地区"
      @click="isshow = true"
    />
    <van-popup v-model="isshow" round position="bottom">

    <van-area title="配送至"
      :area-list="areaList"
      v-model="cascaderValue"
      value="110000"
      @change="changeAddr"
      @cancel="cancelChoose"
      @confirm="chooseThis" />
    </van-popup>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/cart" :info="getAllCount" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import { getDetail } from '../../../api/index'
import { ImagePreview, Toast } from 'vant'
import { areaList } from '@vant/area-data'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  data() {
    return {
      detailAddress: '', // 绑定详细地址输入框
      areaList, // 可选地址数据列表
      proid: '',
      banners: [],
      category: '',
      current: 0,
      title: '',
      originprice: '',
      show: false,
      showvideo: false,
      index: 0,
      videolist: ' 00`30 ',
      vdoSrc: 'https://jvod.300hu.com/vod/product/aea171c2-db08-4ba3-a2b8-e145473a4872/d48ff212ef8e4d56a794a9ecefa481a3.mp4',
      images: [],
      showcell: false,
      isshow: false,
      fieldValue: '',
      cascaderValue: '',
      value: { areaList },
      cartData: []
    }
  },
  created() {
    this.cart = JSON.parse(localStorage.cartList || '[]')
    // console.log(this.cart)
  },
  computed: {
    // 计算购物车总数量
    ...mapGetters({
      getAllCount: 'cart/getAllCount'
    })
  },
  watch: {
    // 监听show,遮罩层
    // 如果遮罩层出现，重置播放时间并且视频播放，如果遮罩层消失，视频停止播放
    showvideo(newVal) {
      if (newVal) {
        this.$refs.vdo.currentTime = 0
        this.$refs.vdo.play()
      } else {
        this.$refs.vdo.pause()
      }
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onChangeimg(index) {
      this.index = index
    },
    myvideo() {
      this.showvideo = !this.showvideo
    },
    previewImage() {
      ImagePreview({
        images: this.banners,
        startPosition: this.index,
        // 轮播结束后触发
        onChange: index => {
          this.index = index + 1
        }
      })
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showcell = false
    },
    cancelChoose() {
      this.isshow = false
    },
    // 地址单选按钮
    changeAddr (picker) {
      // value=0改变省，1改变市，2改变区
      const val = picker.getValues()
      this.resAddr = val
    },
    // 地址确定按钮选择
    chooseThis (val) {
      if (!val) return
      this.fieldValue = val[0].name + '-' + val[1].name + '-' + val[2].name
      this.isshow = false
    },
    // 加入购物车
    addCart() {
      if (!this.fieldValue) {
        Toast('请选择配送区域')
        return
      }
      const goodsData = {
        id: this.id,
        img: this.cartData.img1,
        price: this.cartData.originprice,
        title: this.cartData.proname,
        num: 1,
        issale: this.cartData.issale,
        checked: true,
        cart: []
      }
      Toast('加购成功...')
      this.$store.commit('cart/ADD_CART', goodsData)
    }
  },
  mounted () {
    const proid = this.$route.params.id
    getDetail(proid).then(res => {
      const banners = res.data.data.banners[0];
      (this.banners = banners.split(','));
      (this.title = res.data.data.proname);
      (this.category = res.data.data.category);
      (this.originprice = res.data.data.originprice)
      this.cartData = res.data.data
    })
  }

}
</script>
<style lang="scss" scoped>
.goodsinfo{
  background: #F2F2F2;
.van-swipe{
  background: #fff;
}

.price-box{

  border-radius: 0 0 20px 20px;
}
  .van-swipe{
  height: 300px;
  img{
    height: 300px;
    display: block;
    margin:  0 auto;
  }
  .custom-indicator {
    position: absolute;
    width: 30px;
    bottom: 5px;
    right: 0;
    padding: 2px 5px;
    text-align: center;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px 0 0 10px;
  }
}
  .video-btn {
  position: absolute;
  width: 80px;
  height: 30px;
  left: 42%;
  bottom: 48.5%;
  text-align: center;
  border-radius: 50px;
  background: #ddd;
  font-size: 14px;
  line-height: 30px;
  }
  .my-video{
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  }
  .myPrice{
    padding: 10px 0;
    margin-left:30px ;
    color: #EF1025;
   .price{
    font-size: 20px;
    font-weight: bold;
  }
  }
  .list{
    margin-left: 10px;
    padding-bottom: 10px;
    .category{
      background-color: #EF1025;
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
    }
    h3{
      width: 80%;
     display: inline;
      font-size: 16px;
    }
  }
     .address{
    margin-top: 10px;
    }
  .discount {
     margin-top: 10px;
    display: block;
    background: #fff;
    height: 110px;
    border-radius: 12px;
  .van-cell__right-icon{
        position: relative;
       right: -300px;
        top: -70px;
    }
    .van-cell__title {
      font-weight: bold;
    }
    .van-cell__value{
      text-align: left;
      position: relative;
      top: -33px;
    }
  }
    .content {
    padding: 16px 16px 160px;
    .promotion{
      width: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      margin: 0 5px;
      font-weight: bold;
    }
  }
    .conter-box{
      margin: 10px 0;
      margin-left:30px ;
      font-size: 12px;
      .listOne{
         border:1px solid #EF1025;
         color: #EF1025;
         margin: 0 5px;
       }
    }
    .distribution{
      margin-top: 10px;
      height: 40px;
    }
}
</style>